<template>
    <div>
        <div class="cashback">
            <p>购物满1299.00元，可减50.00</p>
            <router-link :to="'/coupon'"><span>去凑单></span></router-link>
        </div>
        <div class="make" v-for="item in list" :key="item.id">
            <div class="makes">
                
                <!-- <input type="checkbox" :checked="item.checked" @click="item.checked=!item.checked,checkedAll(item.checked,item.money)" > -->
            <img :src="$store.state.imgsrc+item.productImg" alt=""> 
            </div>
            <div class="bb" >
                <p >{{item.productName}}(享受满1000减100服务)</p>
                <dt>{{item.color}}<strong>{{item.size}}</strong></dt>
                 <b>￥{{n*item.productPrice}}</b>
                <s>￥{{item.moneyUrl}}</s>
                
                <div>
                    <p class="shan" @click="del(item.cartId)"><i class="el-icon-delete"></i></p>
                </div>    
            </div> 
                
                     
        </div>
      
        <div class="kong">
            <del @click="del1()" v-show="this.list.length> 0 ? false :true"><i class="el-icon-s-promotion"></i> 购物车为空</del>
        </div>

        <div class="footer">
            <del @click="del1()" v-show="this.list.length> 0 ? true :false">全部删除</del>
        </div>
       
    </div>
</template>

<script>
import {deleteCart ,getCar} from "../../api"
    export default {
        data(){
            return{
                n:1,
                checked:false,
                // zongji:0,
                list:[
                    // {
                       
                    //     nickname:"包包",
                    //     id:12345,
                    //     colorUlr:"颜色：褐色",
                    //     type:"类型：英伦风格",
                    //     money:138,
                    //     moneyUrl:288,
                    //     checked:false

                    // },
                    //  {
                    //     nickname:"包包",
                    //     id:2222,
                    //     colorUlr:"颜色：褐色",
                    //     type:"类型：英伦风格",
                    //    money:222,
                    //     moneyUrl:288,
                    //     checked:false

                    // },
                    //  {
                    //     nickname:"包包",
                    //     id:22222,
                    //     colorUlr:"颜色：褐色",
                    //     type:"类型：英伦风格",
                    //    money:11,
                    //     moneyUrl:288,
                    //     checked:false

                    // }
                ]
                
            }
        },
 mounted(){
         this.getCar()
     },
    methods:{
        getCar(){
            getCar({ userId: this.$store.state.uid }).then(res=>{
                console.log(res,'11111');
                this.list = res.data.data
            })},
        del1(){
            this.list = []
            
        },
        del(id){
            deleteCart({cids:id}).then(res=>{
                console.log(res,"3333");
                //  this.list = res.data.data
                this.getCar();  
            })   
              
             
             
        },
    
    me(){
        this.$router.push("/car")
    }

         
     },
    
    }
</script>

<style scoped>
.cashback {
  justify-content: center;
  width: 100vw;
  height: 5vh;
  display: flex;
  font-size: 14px;
  align-items: center;
  background: #ffff;
  color: #999;
}
.cashback span {
  font-size: 16px;
  color: #409eff;
  margin-left: 125px;
}

.make .bb s{
    text-decoration: line-through;
}
.make{
    width: 96vw;
  height: 20vh;
  border-radius: 10px;
  /* background: #ffff; */
  background-color: #fff;
 background-image: linear-gradient(to left, #fff , hsla(198, 14%, 85%, 0.608));
  display: flex;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 10px;
  
}
.makes{
    display: flex;
    align-items: center;
    justify-content: center;
}


/* .bb p{
    margin-bottom: 15px;
} */
.bb dt{
    font-size: 14px;
    font-style:normal
    
}
strong{
    font-weight:normal;
    margin-left:5px ;
}
b{
    color:#FF6633;
    font-weight: normal;
    margin-right: 8px;
    font-size: 20px;
}
s{
    color: #999999;
    margin-right: 5px;
}
.make img{
   width: 24vw;
  height: 13vh;
    margin-right: 10px;
    margin-left: 10px;
}
.bb span{
     color: #999;
     margin: 5px 5px;
}

.bb{
    line-height: 4vh;
    margin-top: 2vh;
}
.bb .shan{
    margin-left: 190px; 
    font-size: 18px;
    border-radius: 10%;
    color: #409EFF;
}

.footer{
    width: 100vw;
    height: 9vh;
    background: #fff;
    margin-top: 47px;
    display: flex;
    align-items: center;
    /* position: absolute; */
    position: fixed;
  bottom: 0vh;
}
.kong{
    display: flex;
    font-size: 20px;
    text-align: center;
    justify-content: space-around;
    align-items: center;
    margin-top: 5vh;
}
.kong i{
    font-size: 36px;
    display: block;
    color: #409EFF;
    margin-top: 10vh;
}
.footer del{
    width: 28vw;
    height: 7vh;
    background-color: #fff;
 background-image: linear-gradient(to top, #fff , hsla(198, 5%, 56%, 0.608));
    line-height: 7vh;
    text-align: center;
    color: rgb(110, 105, 105);
    border-radius: 80px;
    font-size: 18px;
    margin-top: 2vh;
   position: fixed;
  bottom: 0vh;
  right: 0;
}
body{
    background: #fff;
    height: 100vh;
    overflow-y: hidden;
}
</style>
<style>

body{
    background: #fff;
    /* height: 100vh; */
    overflow-y: hidden;
}
</style>